import React from 'react';
import { Fish, Sparkles } from 'lucide-react';

interface HeaderProps {
  currentLevel: number;
  levelTitle: string;
  levelProgress: number;
  totalEvents: number;
}

const Header: React.FC<HeaderProps> = ({ 
  currentLevel, 
  levelTitle, 
  levelProgress, 
  totalEvents 
}) => {
  return (
    <header className="bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 text-white p-6 rounded-lg shadow-lg mb-6 animate-gradient-x bg-[length:200%_200%] relative overflow-hidden">
      {/* 背景装饰动画 */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-4 left-4 animate-float">
          <Sparkles className="h-6 w-6" />
        </div>
        <div className="absolute top-8 right-8 animate-float-delayed">
          <Fish className="h-8 w-8" />
        </div>
        <div className="absolute bottom-4 left-1/3 animate-bounce-slow">
          <div className="w-2 h-2 bg-white rounded-full"></div>
        </div>
        <div className="absolute bottom-8 right-1/4 animate-pulse-slow">
          <div className="w-3 h-3 bg-white rounded-full"></div>
        </div>
      </div>
      
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3 relative z-10">
          <div className="animate-spin-slow">
            <Fish className="h-8 w-8 hover:scale-110 transition-transform duration-300" />
          </div>
          <div>
            <h1 className="text-2xl font-bold animate-fade-in-up">摸鱼管理系统</h1>
            <p className="text-blue-100 animate-fade-in-up animation-delay-200">记录每一次愉快的摸鱼时光 🐟</p>
          </div>
        </div>
        
        <div className="text-right relative z-10 animate-fade-in-up animation-delay-300">
          <div className="text-lg font-semibold hover:scale-105 transition-transform duration-200">{levelTitle}</div>
          <div className="text-sm text-blue-100 hover:text-white transition-colors duration-200">总计 {totalEvents} 次摸鱼</div>
        </div>
      </div>
      
      {/* 等级进度条 */}
      <div className="bg-white/20 rounded-full h-3 overflow-hidden relative z-10 hover:h-4 transition-all duration-300">
        <div 
          className="bg-gradient-to-r from-yellow-400 to-orange-400 h-full transition-all duration-1000 ease-out animate-shimmer bg-[length:200%_100%] hover:shadow-lg"
          style={{ width: `${levelProgress}%` }}
        />
      </div>
      <div className="flex justify-between text-xs text-blue-100 mt-1 relative z-10 animate-fade-in-up animation-delay-500">
        <span>等级 {currentLevel}</span>
        <span>{levelProgress.toFixed(1)}% 进度</span>
      </div>
    </header>
  );
};

export default Header;